<template>
    <section class="app-main">
<!--        <div class="box">-->
<!--            <div class="snow_slice snow_1">-->
<!--                <div class="snow_drifter drift_1"></div>-->
<!--            </div>-->
<!--            <div class="snow_slice snow_2">-->
<!--                <div class="snow_drifter drift_2"></div>-->
<!--            </div>-->
<!--            <div class="snow_slice snow_3">-->
<!--                <div class="snow_drifter drift_3"></div>-->
<!--            </div>-->
<!--            <div class="snow_slice snow_4">-->
<!--                <div class="snow_drifter drift_4"></div>-->
<!--            </div>-->
            <router-view v-slot="{ Component, route }">
                <transition name="fade-transform" mode="out-in">
                    <keep-alive>
                        <component :is="Component" :key="route.fullPath"/>
                    </keep-alive>
                </transition>
            </router-view>
<!--            <div class="frost">-->
<!--                <div class="frame_sprite frame_right"></div>-->
<!--                <div class="frame_sprite frame_bottom"></div>-->
<!--            </div>-->
<!--        </div>-->
    </section>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}

.box {
  font-family: "Segoe UI", Segoe, Tahoma, Arial, Verdana, sans-serif;
  background: radial-gradient(circle at right, var(--boxStartBg), var(--boxEndBg));
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: 100%;

  .snow_slice {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 2;
  }

  .snow_1 {
    animation-name: snow_falling_fore;
    animation-delay: 0s;
    animation-duration: 50s;
    height: 100%;
    top: -100%;
    pointer-events: none;
  }

  .snow_2 {
    animation-name: snow_falling_fore;
    animation-delay: 25s;
    animation-duration: 50s;
    height: 100%;
    top: -100%;
    pointer-events: none;
  }

  .snow_3 {
    animation-name: snow_falling_mid;
    animation-delay: 0s;
    animation-duration: 70s;
    opacity: .5;
    top: -100%;
    height: 100%;
    pointer-events: none;
  }

  .snow_4 {
    animation-name: snow_falling_mid;
    animation-delay: 35s;
    animation-duration: 70s;
    opacity: .5;
    top: -100%;
    height: 100%;
    pointer-events: none;
  }

  .snow_drifter {
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    background-image: url(@/assets/snow-static.png);
    pointer-events: none;
  }
}

@keyframes snow_falling_fore {
  0% {
    top: -100%;
    opacity: 0
  }
  1% {
    top: -100%;
    opacity: 1
  }
  99.8% {
    top: 100%;
    opacity: 1
  }
  99.9% {
    opacity: 0
  }
  100% {
    top: -100%;
    opacity: 0
  }
}

@keyframes snow_falling_mid {
  0% {
    top: -100%;
    opacity: 0
  }
  1% {
    top: -100%;
    opacity: 1
  }
  99.8% {
    top: 100%;
    opacity: 1
  }
  99.9% {
    opacity: 0
  }
  100% {
    top: -100%;
    opacity: 0
  }
}

.frost {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;

  .frame_sprite {
    position: absolute;
    height: 20px;
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center bottom;
    background-image: url(@/assets/border-ice.png);
  }

  .frame_right {
    top: 100%;
    left: calc(100% - 20px);
    transform: rotate(-90deg);
    transform-origin: 0 0;
    width: 500%;
    pointer-events: none;
  }

  .frame_bottom {
    bottom: 0;
    left: 0;
    width: 500%;
    pointer-events: none;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 17px;
  }
}
</style>